
<template>
    <Myhead title="我的" noback="true">
    </Myhead>
    <div v-if="!usertoken" class="tolog">
        <div class="box">
            <div class="topimg">
                <img src="https://stc.zjol.com.cn/g1/M0004B5CggSDVbqUAGAKQ-fAA-QhQNJT2U731.gif?width=500&height=280" alt="">
            </div>
            <div class="btn">
                <van-button type="success" @click="tologin">&nbsp &nbsp登录&nbsp &nbsp</van-button>
            </div>
        </div>
        <div class="cells">
            <div class="list">
                操作列表
            </div>
            <van-cell icon="setting-o" is-link>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">公告</span>
                </template>
            </van-cell>
            <van-cell icon="setting-o" is-link>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">设置</span>
                </template>
            </van-cell>
            <van-cell icon="setting-o" is-link>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">联系我们</span>
                </template>
            </van-cell>
            <van-cell :value="en + 'MB'" icon="setting-o" is-link @click="clean">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">清除缓存</span>
                </template>
            </van-cell>
        </div>
    </div>
    <div v-else class="islog">
        <div class="box">
            <div class="topimg">
                <img src="https://stc.zjol.com.cn/g1/M0004B5CggSDVbqUAGAKQ-fAA-QhQNJT2U731.gif?width=500&height=280" alt="">
            </div>
            <div class="btn">
                <div class="touxiang">
                    <van-uploader :after-read="upload" multiple :max-count="1">
                        <div class="box1">
                            <img :src='url' alt="">
                        </div>
                    </van-uploader>
                </div>
                <div>
                    {{ username }}
                </div>
                <div>
                    {{ userphone }}
                </div>
            </div>
        </div>
        <div class="cells">
            <div class="list">
                操作列表
            </div>
            <van-cell icon="notes-o" is-link :value="num" to="/find">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">我的游记</span>
                </template>
            </van-cell>
            <van-cell icon="location-o" is-link :value="100">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">我的足迹</span>
                </template>
            </van-cell>
            <van-cell icon="like-o" is-link :value="like" to="/user/like">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">我的点赞</span>
                </template>
            </van-cell>
            <van-cell icon="star-o" is-link :value="collect" to="/user/collect">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">我的收藏</span>
                </template>
            </van-cell>
            <van-cell icon="pending-payment" is-link>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">钱包</span>
                </template>
            </van-cell>
            <van-cell icon="info-o" is-link @click="tochange">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">修改密码</span>
                </template>
            </van-cell>
            <van-cell icon="comment-o" is-link>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">公告</span>
                </template>
            </van-cell>
            <van-cell icon="setting-o" is-link>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">设置</span>
                </template>
            </van-cell>
            <van-cell icon="phone-o" is-link>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">联系我们</span>
                </template>
            </van-cell>
            <van-cell :value="en + 'MB'" icon="warn-o" is-link @click="clean">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <span class="custom-title">清除缓存</span>
                </template>
            </van-cell>
            <van-button block @click="logout">退出登录</van-button>
        </div>
    </div>
    <div class="bigbox">
        已经没有东西啦~~
    </div>
    <div class="cleanmes" v-if="flag">
        <div class="boxx">
            <van-loading type="spinner" class="loading" />
            <div class="text">
                剩余
                <span style="color: red; font-size: 50px;">
                    {{ beleft }}%
                </span>
            </div>
        </div>

    </div>
</template>

<script setup>
import { useComon } from '../../Hooks/comon';
import { userStore } from '@/stores/userinfo'
import { ref, onMounted } from 'vue'
import { showToast } from 'vant';
import { GetUserInfo, GetMyTravels, UpMyHead, ChangeUseHead, GetUserLikeList, GetCollectList } from './userapi'

let en = Math.floor(Math.random() * (100 - 1)) + 1
const store = userStore()
const usertoken = store.getUserToken
const { gotowhere } = useComon()
const beleft = ref(100)
const flag = ref(false)
const username = ref('')
const userphone = ref('')
const usertou = ref('')
const num = ref(0)
const url = ref('')
const collect = ref(0)
var timer = null
const like = ref(0)

const clean = () => {//清除缓存
    if (en == 0) {
        showToast('已经清除完啦')
    } else {
        flag.value = true
        timer = setInterval(() => {
            if (beleft.value > 0) {
                beleft.value--
            } else {
                flag.value = false
                showToast("缓存清除成功")
                clearInterval(timer)
                timer = null
                en = 0
            }
        }, 20)
    }
}

const tochange = () => {
    gotowhere('/user/change')
}

const changehead = async (val) => {
    const res2 = await ChangeUseHead(val)
    if (res2.data.code == 200) {
        showToast({
            message: '头像修改成功'
        })
    }
}

const upload = async (el) => {
    const params = new FormData()
    params.append('file', el.file)
    const res = await UpMyHead(params)
    if (res.data.code == 200) {
        url.value = res.data.path.replace('public', 'http://81.69.235.62:3000/')
        changehead({ avatar: res.data.path })
    }
    // url.value = URL.createObjectURL(el.file)
    console.log(url.value);
}



const getuserinfo = async () => {
    const res = await GetUserInfo()
    console.log(res);
    if (res.data.code == 200) {
        username.value = res.data.result.username
        userphone.value = res.data.result.phone
        usertou.value = res.data.result.avatar
        url.value = res.data.result.avatar.replace('public', 'http://81.69.235.62:3000/')
        console.log(url.value);
    }
}

//获取我的游记数量
const getmytravel = async () => {
    const res = await GetMyTravels()
    console.log(res);
    if (res.data.code == 200) {
        num.value = res.data.result.length
    }
}

//获取我的喜欢列表
const getlikelist = async () => {
    const res = await GetUserLikeList({ flag: true })
    console.log(res);
    if (res.data.code == 200) {
        like.value = res.data.result.length
        console.log(like.value);
    }
}
//获取我的收藏列表
const getcollectlist = async () => {
    const res = await GetCollectList({ flag: true })
    console.log(res);
    if (res.data.code == 200) {
        collect.value = res.data.result.length
    }
}

onMounted(() => {
    getcollectlist()
    getlikelist()
    getuserinfo()
    getmytravel()
})



const logout = () => {
    store.setUserToken('')
    store.setUserName('')
    store.setUserPhone('')
    localStorage.setItem('userToken', '')
    localStorage.setItem('userPhone', '')
    localStorage.setItem('userName', '')
    gotowhere('/user/login')
}

const tologin = () => {
    gotowhere('/user/login')
}

</script>

<style lang="scss">
.bigbox {
    line-height: 50px;
    text-align: center;
    color: #99A6C4;
}

.box {
    position: relative;

    .topimg {
        width: 100%;
        height: 300px;

        img {
            height: 100%;
            width: 100%;
        }
    }

    .btn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        line-height: 30px;
        font-size: 20px;

        .touxiang {
            height: 70px;
            width: 70px;
            border-radius: 50%;
            margin: 0 auto;
            margin-bottom: 20px;

            .box1 {
                height: 70px;
                width: 70px;
                border-radius: 50%;

                img {
                    height: 100%;
                    width: 100%;
                    display: block;
                    border-radius: 50%;
                }
            }


        }

    }
}

.cells {
    .list {
        line-height: 50px;
        font-size: 16px;
        color: #99A6C4;
        padding: 0 20px;
    }
}

.cleanmes {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);

    .boxx {
        height: 100%;
        width: 100%;
        position: relative;

        .text {
            text-align: center;
            line-height: 50px;
            font-size: 15px;
            color: #99A6C4;
        }

        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, 50%);

        }
    }


}
</style>